<template>
  <div class="aui-card-list">
    <uni-list-query-card :queryShow="queryShow" @query-click="getDataList()" @click="(e)=>{this.queryShow=e}" @searchReset="searchReset()">
      <el-col :span="6">
        <el-form-item label="接口编码">
          <el-input v-model="dataForm.apiCode"
                    placeholder="接口编码" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="接口名称">
          <el-input v-model="dataForm.apiName"
                    placeholder="接口名称" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="接口状态">
          <el-select v-model="dataForm.status" placeholder="请选择" clearable>
            <el-option v-for="template in $getDictList('SYS_STATUS', true)"
                       :key="template.val"
                       :label="template.label"
                       :value="template.val"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <template slot="other">
        <el-col :span="6">
          <el-form-item label="数据使用者">
            <el-input v-model="dataForm.apiConsumer"
                      placeholder="数据使用者" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="数据提供者">
            <el-input v-model="dataForm.apiProvider"
                      placeholder="数据提供者" clearable></el-input>
          </el-form-item>
        </el-col>
      </template>
    </uni-list-query-card>
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar setting>
        <template v-slot:buttons>
          <el-button v-if="
              $hasPermission('sys:sysdicttype:save') &&
              $store.state.user.superAdmin === 1
            " type="primary" @click="addOrUpdateHandle()">
            {{ $t('add') }}
          </el-button>
          <el-button v-if="
              $hasPermission('sys:sysdicttype:delete') &&
              $store.state.user.superAdmin === 1
            " type="danger" @click="deleteHandle()">
            {{ $t('deleteBatch') }}
          </el-button>
        </template>
        <template v-slot:tools>
          <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
        </template>
      </vxe-toolbar>
      <vxe-table ref="xTable"
                 :loading="dataListLoading"
                 class="vxe-table-element"
                 auto-resize
                 max-height="auto"
                 :sort-config="{trigger:'cell'}"
                 @sort-change="sortChange"
                 @select-change="dataListSelectionChangeHandleVex"
                 @select-all="dataListSelectionAllChangeHandleVex"
                 :data="dataList">
        <vxe-table-column type="checkbox" align="center" width="60"></vxe-table-column>
        <vxe-table-column field="apiCode" title="接口编码" width="120">
          <template slot-scope="scope">
            <a @click="viewApi(scope.row)"> {{ scope.row.apiCode}}</a>
          </template>
        </vxe-table-column>
        <vxe-table-column field="apiName" title="接口名称">
        </vxe-table-column>
        <vxe-table-column field="apiProvider" title="数据提供者" width="100">
          <template slot-scope="scope">
            {{getAppName(scope.row.apiProvider)}}
          </template>
        </vxe-table-column>
        <vxe-table-column field="apiConsumer" title="数据使用者" width="100">
          <template slot-scope="scope">
            {{getAppName(scope.row.apiConsumer)}}
          </template>
        </vxe-table-column>
        <vxe-table-column field="status" title="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag v-if="!scope.row.status" size="small" type="danger">停用</el-tag>
            <el-tag v-else size="small" type="success">启用</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column title="handle" width="180">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.status" type="text" size="small" icon="el-icon-circle-check"
                       @click="updateStatus(scope.row)">启用
            </el-button>
            <el-button v-if="scope.row.status" type="text" size="small" icon="el-icon-circle-close"
                       @click="updateStatus(scope.row)">停用
            </el-button>
            <el-button v-if="$hasPermission('api:apiConf:update')" type="text" size="small" icon="el-icon-delete"
                       @click="addOrUpdateHandle(scope.row)">{{ $t('update') }}
            </el-button>
            <el-button v-if="$hasPermission('api:apiConf:delete')" type="text" size="small" icon="el-icon-delete"
                       @click="deleteHandle(scope.row.id)">{{ $t('delete') }}
            </el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <el-pagination
        :current-page="page"
        :page-sizes="pageSizes"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import Template from '../wechat/template'
export default {
  components: { Template },
  mixins: [mixinViewModule],
  data () {
    return {
      searchShow: true,
      mixinViewModuleOptions: {
        getDataListURL: '/api/apiConf/page',
        getDataListIsPage: true,
        deleteURL: '/api/apiConf',
        deleteIsBatch: true,
        exportURL: '/api/apiConf/export'
      },
      headLock: true,
      appList: [],
      dataForm: {
        apiCode: '',
        apiName: '',
        apiProvider: '',
        apiConsumer: '',
        status: ''
      }
    }
  },
  activated () {
    Promise.all([
      this.getAppInfo(),
      this.getDataList()
    ]).then(() => {
    })
  },
  methods: {
    // 新增 / 修改
    addOrUpdateHandle (row) {
      let title = '新增'
      let id
      if (row) {
        title = row.apiName
        id = row.id
      }
      // 打开路由
      var router = {
        name: 'api-apiConf-editTab',
        id: id,
        menuId: this.$route.meta.menuId,
        oldName: 'api-apiConf',
        path: 'api/apiConf-editTab',
        title: '编辑接口管理表-' + title
      }
      var params = {
        id: id,
        timestamp: this.$xeutils.timestamp()
      }
      this.$options.methods.openNewTab(this.$router, router, params)
    },
    viewApi (row) {
      let id = row.id
      // 打开路由
      var router = {
        name: 'api-apiConfView',
        id: id,
        menuId: this.$route.meta.menuId,
        oldName: 'api-apiConf',
        path: 'api/apiConfView',
        title: '接口详细信息-' + row.apiName
      }
      var params = {
        timestamp: this.$xeutils.timestamp(),
        id: id
      }
      this.$options.methods.openNewTab(this.$router, router, params)
    },
    getAppInfo () {
      this.$http.get(`/sys/sysApp/listAll`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.appList = res.data
      }).catch(() => {})
    },
    updateStatus (row) {
      let title
      if (row.status) {
        title = '停用接口 ---- ' + row.apiCode
      } else {
        title = '启用接口 ---- ' + row.apiCode
      }
      this.$confirm(this.$t('prompt.info', { 'handle': title }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        let temp = row
        temp.status = !temp.status
        this.$http.post('/api/apiConf/updateStatus', temp).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            this.$message.success('处理成功')
            this.getDataList()
          }
        })
      })
    },
    getAppName (appId) {
      let appName = ''
      this.appList.forEach(app => {
        if (app.appId === appId) {
          appName = app.appName
          return appName
        }
      })
      return appName
    }
  }
}
</script>
